<template>
 <div>
   <div style="display: flex;justify-content: center;margin-top: 10px">
     <el-input v-model="keywords" placeholder="通过用户名搜索用户..." prefix-icon="el-icon-search"
               style="width: 400px;margin-right: 10px"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
   </div>
   <div class="user-container">
     <el-card class="user-card" v-for="(user,index) in users" :key="index">
       <div slot="header" class="clearfix">
         <span>{{user.username}}</span>
         <el-button style="float: right; padding: 3px 0;color: red" type="text" icon="el-icon-delete" @click="deleteUser(user)"></el-button>
       </div>
       <div>
         <div class="img-container">
           <img :src="user.avatar" :alt="user.username" :title="user.username" class="avatar_img">
         </div>
       </div>
       <div>
         <div cLass="userinfo-container">
           <div>用户编号: {{user.userId}}</div>
           <div>用户名: {{user.username}}</div>
           <div>昵称: {{user.nickname}}</div>
           <div>生日: {{user.birth}}</div>
           <div>性别: {{user.sex}}</div>
           <div>用户状态:
             <el-switch
               v-model="user.enabled"
               active-color="#13ce66"
               inactive-color="#ff4949"
               active-text="启用"
               inactive-text="禁用"
               @change="enabledChange(user)">
             </el-switch>
           </div>
           <div>
             角色:
             <el-tag type="success"
                     v-for="(role,indexj) in user.roles"
                     :key="indexj">{{role.nameZh}}
             </el-tag>
             <el-popover
               placement="right"
               title="角色列表"
               width="200"
               trigger="click"
               @show="showPop(user)"
               @hide="hidePop(user)">
               <el-select v-model="selectRoles" multiple placeholder="请选择">
                 <el-option
                   v-for="(r,index) in allRoles"
                   :key="index"
                   :label="r.nameZh"
                   :value="r.id">
                 </el-option>
               </el-select>
               <el-button slot="reference" style="margin-left: 10px" type="text" icon="el-icon-more"></el-button>
             </el-popover>
           </div>
       </div>
       </div>
     </el-card>
   </div>
 </div>
</template>

<script>
  export default {
    name: 'DataBasic',
    data(){
      return{
        users:[],
        keywords:'',
        allRoles:[],
        selectRoles:[],
      }
    },
    mounted(){
      this.initUsers();
    },
    methods:{
      hidePop(user){
        let roles=[];
        Object.assign(roles,user.roles);
        let flag=false;

        if (roles.length!=this.selectRoles.length){
          flag=true;
        } else{
          for (let i=0;i<roles.length;i++){
            let role=roles[i];
            for (let j=0;j<this.selectRoles.length;j++){
              let sr =this.selectRoles[j];
              if (role.id==sr){
                roles.splice(i,1);
                i--;
                break;
              }
            }
          }
          if (roles.length!=0){
            flag=true;
          }
        }

        if (flag){
          let url ='/data/basic/updaterole/?uid='+user.userId;
          this.selectRoles.forEach(sr=>{
            url +='&rids='+sr;
          })
          this.putRequest(url).then(resp=>{
            if (resp){
              this.initUsers();
              this.$notify.success({ title: '成功', message: resp.message });
            }
          })
        }
      },
      showPop(user){
        this.initAllRoles();
        let roles=user.roles;
        this.selectRoles=[];
        roles.forEach(r=>{
          this.selectRoles.push(r.id);
        })
      },
      initAllRoles(){
        this.getRequest('/system/role/permiss').then(resp=>{
          if (resp){
            this.allRoles=resp;
          }
        });
      },
      enabledChange(user){
        let url = '/data/basic/update/?userId='+user.userId+'&&enabled='+user.enabled;
        this.putRequest(url).then(resp => {
          if (resp) {
            this.initUsers();
            this.$notify.success({ title: '成功', message: resp.message });
          }
        })
      },
      deleteUser(user){
        this.$confirm('此操作将永久删除用户【'+user.username+'】, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/data/basic/delete/?userId='+user.userId).then(resp=>{
            if (resp){
              this.initUsers();

              this.$notify.success({ title: '成功', message: '用户删除成功' });
            }
          });
        }).catch(() => {

          this.$notify.info({ title: '消息', message: '已取消删除' });
        });
      },
      initUsers(){
        this.getRequest('/data/basic/list/?keywords='+this.keywords).then(resp => {
          if (resp) {
            this.users = resp;
          }
        })
      },
      doSearch(){
        this.initUsers();
      },
    }
  }

</script>

<style>
  .user-container{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 30px;
  }
  .user-card{
    width: 350px;
    margin-bottom: 20px;
  }
  .avatar_img{
    width: 72px;
    height: 72px;
    border-radius: 72px;
  }
  .img-container{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .userinfo-container{
    font-size: 12px;
    color: cornflowerblue;
  }

</style>
